<template>
  <div class="content">
    <!--    搜索框-->
    <!--    <div style="display: flex;align-items: center;justify-content: flex-start;font-size: 14px">-->
    <!--      <div class="demo-input-suffix" style="display: flex;margin: 10px 10px;">-->
    <!--        <span style="display: flex;align-items: center;width: 30%">模型名称：</span>-->
    <!--        <el-input style="width: 70%" placeholder="请输入内容"></el-input>-->
    <!--      </div>-->
    <!--      <el-row>-->
    <!--        <el-button type="info">重重</el-button>-->
    <!--        <el-button type="success" icon="el-icon-search">搜索</el-button>-->
    <!--      </el-row>-->
    <!--    </div>-->
    <!--    新建-->
    <el-button style="margin-bottom: 10px" type="primary" icon="el-icon-plus" @click="addGroup">新建
    </el-button>

    <div class="table_cn">
      <!--    表单-->
      <el-table height="460" :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="avatar" label="图片" width="280">
          <template slot-scope="scope">
            <img :src="baseURL + scope.row.img" alt="avatar"
              style="width: 150px; height: 80px;border-radius: 10px">
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">正常</span>
            <span v-else-if="scope.row.status == 0" style="color: red">隐藏</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="createtime"
            label="时间"
            width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--        分页-->
    <el-pagination style="text-align: center;margin-top: 20px " background layout="total,prev, pager, next"
      :page-size="this.pageSize" :total="this.total" @current-change="getBannerList">
    </el-pagination>
    <!--    弹出框-->
    <ModalView :dialogVisible="dialogVisible" :info="info" @close="dialogVisible = false" />
  </div>
</template>

<script>
import ModalView from "@/views/modeling/banner/components/ModalView.vue";
import { BannerList, BannerDelete } from "@/utils/api/banner";
import {baseURL} from "@/utils/httpRequest/baseURL";

export default {
  components: { ModalView },
  data() {
    return {
      baseURL,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      tableData: [],
      status: '',
      info: {},
      options: [{
        value: "1",
        label: '正常'
      }, {
        value: "0",
        label: '隐藏'
      }]
    }
  },
  mounted() {
    this.getBannerList()
  },

  methods: {
    //新建
    addGroup() {
      this.info = {}
      this.dialogVisible = true
    },


    //查询
    async getBannerList(pageNum = 1, pageSize = this.pageSize) {
      console.log(pageNum, pageSize);
      const res = await BannerList({ pageNum, pageSize });
      console.log(res);
      this.tableData = res.data.records;
      this.total = res.data.total; // 更新总条数
    },


    //添加信息
    updateStatus() {
      const value = this.status === 1 ? 1 : 0;
    },

    //修改
    handleEdit(index, row) {
      console.log(row);
      this.info = row
      this.dialogVisible = true
    },

    // 删除信息
    async handleDelete(index, row) {
      console.log(row);
      try {
        // 弹出确认框
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        let id = row.id;
        // 用户点击了确定按钮，调用封装的接口函数
        const res = await BannerDelete(id);
        if (res.code === 200) {
          // 删除成功，更新前端数据
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          // 删除失败，显示错误信息
          this.$message.error(res.data.msg || '删除用户失败');
        }
      } catch (error) {
        // 用户点击了取消按钮或者删除操作失败
        console.error(error);
        this.$message.error(error.message || '删除用户失败');
      }
    }
  }
}
</script>
<style scoped>

</style>